Example

With {reactablefmtr}, you can now conditionally format values using icons from Font Awesome.

data <- sample_n(penguins,50) %>% select(species, bill_length_mm, bill_depth_mm, flipper_length_mm, body_mass_g)

reactable(data)

By including icon_sets() within the cell argument of colDef, circle icons are added to each of the values in the bill_length_mm column and are colored either red, orange, or green depending on their value in relation to all the other values in the column.

reactable(data,
          columns = list(
            bill_length_mm = colDef(cell = icon_sets(data))))

Custom Color Palettes

If we want to change the color palette to something other than the default, we can do so using the colors argument:

reactable(data,
          columns = list(
            bill_length_mm = colDef(cell = icon_sets(data, colors = c("tomato", "grey", "dodgerblue")))))

Note that the order of the colors matters. The first color provided is assigned to the values that are in the lower-third tier, the next color to the middle tier, and the last color is assigned to the upper-third tier.

If assigning custom colors, three colors must be provided. If the number of colors is not three, it will throw an error message requesting three colors to be used.

Custom Icons

By default, the three icons displayed when using icon_sets() are all circles. However, we can change the icons to anything from the Font Awesome icon gallery using the icons argument below:

reactable(data,
          columns = list(
            bill_length_mm = colDef(cell = icon_sets(data, 
                                                     icons = c("balance-scale-left", "balance-scale", "balance-scale-right"),
                                                     colors = c("tomato", "grey", "dodgerblue")))))

Just like with the colors argument, the order of the icons we provide matters and goes in order from smallest values to largest values in the column.

Adding Percentages to Values

If we want to show a column that contains percentages, like the dataset below that is used within the data_bars() example…

cars_data <- MASS::Cars93[c("Make", "Price")]

cars_data <- cars_data %>% mutate("Price vs Avg" = round(Price/mean(Price)-1,2))

reactable(cars_data,
          columns = list(
            `Price vs Avg` = colDef(cell = icon_sets(cars_data, 
                                                     icons = c("arrow-down", "minus", "arrow-up")))))

We can include percent = TRUE to that particular column:

reactable(cars_data,
          columns = list(
            `Price vs Avg` = colDef(cell = icon_sets(cars_data, 
                                                     icons = c("arrow-down", "minus", "arrow-up"),
                                                     percent = TRUE))))

Apply to All Columns

Lastly, if we want to apply icon_sets() to every numeric column, we can simply use defaultColDef as shown below:

reactable(data,
          defaultColDef = colDef(cell = icon_sets(data)))